<?php View::display('accounting/menu');?>
<link href="css/smoothness/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<!-- .head -->
<header class="head">
	<!-- ."main-bar -->
	<div class="main-bar">
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">
					<h3>
						<i class="icon-wrench"></i> บริการของลูกค้า
					</h3>
				</div>
			</div>
			<!-- /.row-fluid -->
		</div>
		<!-- /.container-fluid -->
	</div>
	<!-- /.main-bar -->
</header>
<!-- /.head -->
<!-- #content -->
<div id="content">
	<!-- .outer -->
	<div class="container-fluid outer">
	
		<div class="row-fluid">
			<!-- .inner -->
			<div class="span12 inner">
				<!--Begin Datatables-->
				<div class="row-fluid">
					<div class="span12">
						<div class="box">
							<header>
								<div style="padding: 10px;">
									<button class="btn btn-success addColoButton">Add Colo</button>
									<button class="btn btn-success addVPSButton">Add VPS</button>
									<button class="btn btn-success addHostingButton">Add Hosting</button>
								</div>
							</header>
							<div class="body">
								<table class="table table-bordered dataTable responsive">
									<thead>
										<tr>
											<th>id</th>
											<th>package name</th>
											<th>หมดอายุ</th>
											<td>สถานะ</td>
											<td>user</td>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<?php
										foreach($params['products'] as $key => $row){
										$date = new DateTime($row['createTime']);
										$createTime = $date->format('j F Y');
										
										$date = new DateTime($row['dateTimeout']);
										//$dateTimeout = $row['dateTimeout'] == '0000-00-00'? 'Forever' : $date->format('j F Y');
										$dateTimeout = $row['dateTimeout'] == '0000-00-00'? 'Forever' : $date->format('j/n/Y');
										
										$timeStr = $createTime.' - '.$dateTimeout;
										if($row['status']==1){
											$status = 'ปกติ';
										}
										else{
											$status = 'ระงับการใช้งาน';
										}
										$package = "<strong>{$row['package']['type']}</strong><br /><small>{$row['package']['name']}</small>";
										echo <<<HTML
											<tr class="list-row" rowId="{$row['id']}">
												<th><a target="_blank" href="old.php?page=product&id={$row['id']}">{$row['id']}</a></th>
												<th>{$package}</th>
												<th>{$dateTimeout}</th>
												<td>{$status}</td>
												<td>{$row['account']['email']}</td>
												<td class="del"><button class="editButton btn btn-warning" aid={$row['id']}>แก้ไข</button></td>
												<td class="edit"><button class="delButton btn btn-danger" aid={$row['id']}>ลบ</button></td>
											</tr>
HTML;
										}?>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--Begin Datatables-->
	</div>
</div>
<script type="text/template" class="modalAddColo">
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Add product colo</h3>
		</div>
		<div class="modal-body">
			<div class="alert resMessage" style="display: none;"></div>
			<form class="formProduct">
				<label>package</label>
				<select class="packageId">
					<?php foreach($params['packages'] as $key => $value){
						if($value['type'] == 'colo')
						echo <<<HTML
						<option value="{$value['id']}">{$value['type']} {$value['name']}</option>
HTML;
					}?>
				</select>
				<label>info</label>
				<textarea class="info"></textarea>
				<!--
				<label>account id</label>
				<input type="text" class="accountId" />
				-->
				<label>account email</label>
				<input type="text" class="accountEmail" />
				<label>price / month</label>
				<input type="text" class="price input-small" value="0" /> / <input type="text" class="month input-small" value="0" /> 
				<!--
				<h5>Optional</h5>
				<label>จำนวน ip</label>
				<input type="text" class="ipNum input-small" value="1" />
				<label>ip list</label>
				<fieldset class="ip-fieldset"></fieldset>
				<label>Net</label>
				<ul>
					<li><input type="radio" name="net" class="net" value="1" checked> Direct Like 100Mb</li>
					<li><input type="radio" name="net" class="net" value="2"> Share Like 1Gb</li>
					<li><input type="radio" name="net" class="net" value="3"> Direct Like 1Gb</li>
				</ul>
				<p><input type="checkbox" class="admin" /> ผู้ดูแลระบบ</p>
				-->
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn cancel">Cancel</a>
			<a href="#" class="btn btn-primary Add">Add</a>
		</div>
	</div>
</script>

<script type="text/template" class="modalAddVPS">
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Add product vps</h3>
		</div>
		<div class="modal-body">
			<div class="alert resMessage" style="display: none;"></div>
			<form class="formProduct">
				<label>package</label>
				<select class="packageId">
					<?php foreach($params['packages'] as $key => $value){
						if($value['type'] == 'vps')
						echo <<<HTML
						<option value="{$value['id']}">{$value['name']}</option>
HTML;
					}?>
				</select>
				<label>info</label>
				<textarea class="info"></textarea>
				<!--
				<label>account id</label>
				<input type="text" class="accountId" />
				-->
				<label>account email</label>
				<input type="text" class="accountEmail" />
				<label>price / month (<span>*0 เดือน คือวันนี้จนถึงวันที่ 1 เดือนหน้า</span>)</label>
				<input type="text" class="price input-small" value="0" /> / <input type="text" class="month input-small" value="0" />
				<!--
				<label>ip</label>
				<input type="text" class="ip" value="" />
				-->
				<label>os</label>
				<select class="os">
					<!-- <option value="<?php echo InvoiceVPS::OS_UNIX; ?>">unix</option> -->
					<option value="<?php echo InvoiceVPS::OS_LINUX; ?>">linux</option>
					<option value="<?php echo InvoiceVPS::OS_WINDOW; ?>">window</option>
				</select>
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn cancel">Cancel</a>
			<a href="#" class="btn btn-primary Add">Add</a>
		</div>
	</div>
</script>

<script type="text/template" class="modalAddHosting">
	<div class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			<h3>Add product hosting</h3>
		</div>
		<div class="modal-body">
			<div class="alert resMessage" style="display: none;"></div>
			<form class="formProduct">
				<label>package</label>
				<select class="packageId">
					<?php foreach($params['packages'] as $key => $value){
						if($value['type'] == 'hosting')
						echo <<<HTML
						<option value="{$value['id']}">{$value['name']}</option>
HTML;
					}?>
				</select>
				<label>info</label>
				<textarea class="info"></textarea>
				<!--
				<label>account id</label>
				<input type="text" class="accountId" />
				-->
				<label>account email</label>
				<input type="text" class="accountEmail" />
				<label>price / month (<span>*0 เดือน คือวันนี้จนถึงวันที่ 1 เดือนหน้า</span>)</label>
				<input type="text" class="price input-small" value="0" /> / <input type="text" class="month input-small" value="0" /> 
				<!--
				<label>serverName</label>
				<input type="text" class="serverName" value="" />
				-->
				<label>domain</label>
				<input type="text" class="domain" value="" />
			</form>
		</div>
		<div class="modal-footer">
			<a href="#" class="btn cancel">Cancel</a>
			<a href="#" class="btn btn-primary Add">Add</a>
		</div>
	</div>
</script>
<script type="text/javascript">
$(function(){
	var oTable = $('.dataTable').dataTable({"bFilter": false, "bInfo": false, "bSort": false,
		sDom: "<'pull-right'l>t<'row-fluid'<'span6'f><'span6'p>>",
        sPaginationType: "bootstrap",
        oLanguage: {
            "sLengthMenu": "Show _MENU_ entries"
        }
    });

	function delRow(row){
		$(row).fadeOut(function(){
			row = $(row).get(0);
			oTable.fnDeleteRow(oTable.fnGetPosition(row));
		});
	}
	
	var confirm = $('<div><button class="btn yes">Yes</button> <button class="btn no">No</button></div>');
	$('.delButton').popover({
		placement: 'bottom',
		html: true,
		title: 'Are you shure?',
		content: confirm
	});
	
	$('.list-row').delegate('.yes', 'click', function(event){
		var dTarget = $(event.delegateTarget);
		var id = dTarget.attr('rowId');
		$('.delButton', dTarget).button('loading');
		$.ajax('old.php?page=accounting/product.rest', {
			type: 'DELETE',
			data: {id: id},
			dataType: 'JSON',
			success: function(data){
				if(data.success){
					dTarget.fadeOut('slow', function(){
						$(this).remove();
					});
				}
			}
		});
		$('.delButton', dTarget).popover('hide');
	})
	.delegate('.no', 'click', function(event){
		var dTarget = $(event.delegateTarget);
		$('.delButton', dTarget).popover('hide');
	})
	.delegate('.editButton', 'click', function(event){
		var dTarget = $(event.delegateTarget);
		var target = $(event.target);
		var id = dTarget.attr('rowId');

		target.button('loading');
		$.get('old.php', { page: 'accounting/product.rest', id: id }, function(data){
			target.button('reset');

			if(data.type == 'colo'){
				var modal = $($('.modalAddColo').html());
			}
			else if(data.type == 'vps'){
				var modal = $($('.modalAddVPS').html());
			}
			else if(data.type == 'hosting'){
				var modal = $($('.modalAddHosting').html());
			}
			
			$('.packageId', modal).val(data.packageId);
			$('.info', modal).val(data.info);
			//$('.accountId', modal).val(data.accountId);
			$('.price', modal).val(data.price);
			$('.month', modal).val(data.month);
			
			$('.formProduct', modal).append(
				'<label>วันหมดอายุ</label>' +
				'<div><input type="text" class="dateTimeout" value="'+data.dateTimeout+'" readonly /></div>'
			);

			//$('.dateTimeout', modal).datepicker({ dateFormat: 'yy-mm-dd', minDate: new Date(data.dateTimeout) });
			$('.dateTimeout', modal).datepicker({ dateFormat: 'yy-mm-dd' });

			//$('.accountId', modal).attr('readonly', true);
			
			$('.accountEmail', modal).prev().remove();
			$('.accountEmail', modal).remove();

			if(data.type == 'colo'){
				/*
				var rowIpPrototype = $('<p class="rowIp">ip: <input type="text" class="ip" value="" /></p>');
				function addIp(ip){
					var row = rowIpPrototype.clone();
					$('.ip', row).val(ip);
					$('.ip-fieldset', modal).append(row);
				}
				$('.ipNum', modal).val(data.ipNum);
				$(data.ip).each(function(index, value){
					addIp(value.ip);
				});
				
				$('.ipNum', modal).keyup(function(event){
					var newCount = $(this).val();
					var oldCount = $('.ip-fieldset .rowIp').size();

					function removeLoop(){
						$('.ip-fieldset .rowIp:last').remove();
						var count = $('.ip-fieldset .rowIp', modal).size();
						if(count > newCount) removeLoop();
					}

					function addLoop(){
						addIp('');
						var count = $('.ip-fieldset .rowIp', modal).size();
						if(count < newCount) addLoop();
					}
					
					if(newCount > oldCount){
						addLoop();
					}
					else if(newCount < oldCount){
						removeLoop();
					}
				});

				$('.net[value="'+data.net+'"]', modal).attr('checked', true);
				$('.admin', modal).attr('checked', data.admin == 1 ? true: false);
				*/
			}
			else if(data.type == 'vps'){
				//$('.ip', modal).val(data.ip);
				$('.os', modal).val(data.os);
			}
			else if(data.type == 'hosting'){
				//$('.serverName', modal).val(data.serverName);
				$('.domain', modal).val(data.domain);
			}

			$('.Add', modal).addClass('saveChange').text('Save Change');
			
			modal.modal();
			modal.on('hidden', function(){
				modal.remove();
			});
			
			$('.saveChange', modal).click(function(){
				var sendData = {
						id: data.id,
						packageId: $('.packageId', modal).val(),
						info: $('.info', modal).val(),
						//accountId: $('.accountId', modal).val(),
						month: $('.month', modal).val(),
						price: $('.price', modal).val(),
						dateTimeout: $('.dateTimeout', modal).val()
					};
				if(data.type == 'colo'){
					var url = 'product.colo.rest';
					/*
					sendData.ipNum= $('.ipNum', modal).val();
					sendData.ipList= [];
					sendData.admin= $('.admin:checked', modal).size() == 1? 1: 0;
					sendData.net= $('.net:checked', modal).val();

					$('.ip-fieldset .ip').each(function(index, el){
						sendData.ipList.push($(el).val());
					});
					*/
				}
				else if(data.type == 'vps'){
					var url = 'product.vps.rest';
					//sendData.ip= $('.ip', modal).val();
					sendData.os= $('.os', modal).val();
				}
				else if(data.type == 'hosting'){
					var url = 'product.hosting.rest';
					//sendData.serverName= $('.serverName', modal).val();
					sendData.domain= $('.domain', modal).val();
				}
				
				$('.saveChange', modal).button('loading');
				$.ajax('old.php?page=accounting/'+url, {
					dataType: 'JSON',
					type: 'PUT',
					data: sendData,
					success: function(data){
						if(data.success){
							location.reload();
						}
						else {
							$('.resMessage', modal).text(data.message).show();
						}
					}
				});
			});
			$('.cancel', modal).click(function(){
				$('.close', modal).click();
			});
		}, 'JSON');
	});

	// add colo
	
	$('.addColoButton').click(function(event){
		event.preventDefault();
		var modal = $($('.modalAddColo').html());
		
		modal.modal();
		$(".dateStart", modal).datepicker({ dateFormat: 'yy-mm-dd' });
		$(".dateTimeout", modal).datepicker({ dateFormat: 'yy-mm-dd' });
		
		modal.on('hidden', function(){
			modal.remove();
		});

		/*
		var rowIpPrototype = $('<p class="rowIp">ip: <input type="text" class="ip" value="" /></p>');
		
		function addIp(ip){
			var row = rowIpPrototype.clone();
			$('.ip', row).val('');
			$('.ip-fieldset', modal).append(row);
		}
		
		$('.ipNum', modal).keyup(function(event){
			var newCount = $(this).val();
			var oldCount = $('.ip-fieldset .rowIp').size();

			function removeLoop(){
				$('.ip-fieldset .rowIp:last').remove();
				var count = $('.ip-fieldset .rowIp', modal).size();
				if(count > newCount) removeLoop();
			}

			function addLoop(){
				addIp('');
				var count = $('.ip-fieldset .rowIp', modal).size();
				if(count < newCount) addLoop();
			}
			
			if(newCount > oldCount){
				addLoop();
			}
			else if(newCount < oldCount){
				removeLoop();
			}
		});
		$('.ipNum', modal).keyup();
		*/
		
		$('.Add', modal).click(function(event){
			var sendData = {
					packageId: $('.packageId', modal).val(),
					info: $('.info', modal).val(),
					//accountId: $('.accountId', modal).val(),
					accountEmail: $('.accountEmail', modal).val(),
					month: $('.month', modal).val(),
					price: $('.price', modal).val(),
					ipNum: 0,
					ipList: [],
					admin: 0,
					net: 0
					/*
					price: $('.price', modal).val(),
					ipNum: $('.ipNum', modal).val(),
					ipList: [],
					admin: $('.admin:checked', modal).size() == 1? 1: 0,
					net: $('.net:checked', modal).val()
					*/
				};
			$('.ip-fieldset .ip').each(function(index, el){
				sendData.ipList.push($(el).val());
			});
			
			$('.Add', modal).button('loading');
			$.ajax('old.php?page=accounting/product.colo.rest', {
				dataType: 'JSON',
				type: 'POST',
				data: sendData,
				success: function(data){
					if(data.success){
						location.reload();
					}
					else {
						$('.resMessage', modal).text(data.message).show();
					}
				}
			});
		});
		
		$('.cancel', modal).click(function(){
			$('.close', modal).click();
		});
	});

	// add vps
	
	$('.addVPSButton').click(function(event){
		event.preventDefault();
		var modal = $($('.modalAddVPS').html());
		
		modal.modal();
		
		modal.on('hidden', function(){
			modal.remove();
		});
		
		$('.Add', modal).click(function(event){
			var sendData = {
					packageId: $('.packageId', modal).val(),
					info: $('.info', modal).val(),
					//accountId: $('.accountId', modal).val(),
					accountEmail: $('.accountEmail', modal).val(),
					month: $('.month', modal).val(),
					price: $('.price', modal).val(),
					ip: $('.ip', modal).val(),
					os: $('.os', modal).val()
				};
			$('.Add', modal).button('loading');
			$.ajax('old.php?page=accounting/product.vps.rest', {
				dataType: 'JSON',
				type: 'POST',
				data: sendData,
				success: function(data){
					if(data.success){
						location.reload();
					}
					else {
						$('.resMessage', modal).text(data.message).show();
					}
				}
			});
		});
		
		$('.cancel', modal).click(function(){
			$('.close', modal).click();
		});
	});

	// add hosting
	
	$('.addHostingButton').click(function(event){
		event.preventDefault();
		var modal = $($('.modalAddHosting').html());
		
		modal.modal();
		modal.on('hidden', function(){
			modal.remove();
		});
		
		$('.Add', modal).click(function(event){
			var sendData = {
					packageId: $('.packageId', modal).val(),
					info: $('.info', modal).val(),
					//accountId: $('.accountId', modal).val(),
					accountEmail: $('.accountEmail', modal).val(),
					month: $('.month', modal).val(),
					price: $('.price', modal).val(),
					//serverName: $('.serverName', modal).val(),
					serverName: '',
					domain: $('.domain', modal).val()
				};
			$('.Add', modal).button('loading');
			$.ajax('old.php?page=accounting/product.hosting.rest', {
				dataType: 'JSON',
				type: 'POST',
				data: sendData,
				success: function(data){
					if(data.success){
						location.reload();
					}
					else {
						$('.resMessage', modal).text(data.message).show();
					}
				}
			});
		});
		
		$('.cancel', modal).click(function(){
			$('.close', modal).click();
		});
	});
});
</script>